<template>
	<view class="container">
	   <u-popup :show="show"  mode="bottom" :closeable="true" :round="10" @close="close">
	     <view class="popDialog">
	       <view class="font-32 text-bold m-l-40 m-b-40 text-center">选择上门时间</view>
	       <view class="timebox">
	         <scroll-view scroll-y="true" class="timel">
	           <view v-for="(item,index) in timeList" :key="index" class="date" :class="leftIndex==index?'on':''" @click="changeLeft(index)">{{item.name}}</view>
	         </scroll-view>
	         <scroll-view scroll-y="true" class="timer">
	           <view v-for="(item,index) in time_slots" :key="index" class="time" :class="rightIndex==index?'active':''" @click="chooseTimeStr(index)">
	             <view>
					{{item.name}} 
					<text class="text-24 text-grey" v-if="item.disabled==1">（已满）</text> 
				 </view>
	             <view>
	               <image :src="$util.img('/image/radio2.png')" mode="" v-if="rightIndex==index"></image>
	               <image :src="$util.img('/image/radio.png')" mode="" v-else></image>
	             </view>
	           </view>
	         </scroll-view>
	       </view>
	        <view class="flex-between">
				<view class="submit reset" @click="reset()">重置</view>
				<view class="submit" @click="confirm()">确定</view>
		   </view>
	     </view>
	  </u-popup>
	</view>
</template>

<script>
	export default {
		name:"chooseFoodTime",
		props: {
		  show: {
		    type: Boolean,
		    default: false
		  },
		  roomId: {
			type: [String, Number],
			default: '' // 包厢id
		  }
		},
		data() {
			return {
				leftIndex: 0,
				timeList: [],
				time_slots: [{
					name: '午餐',
					disabled: 0,
				},{
					name: '晚餐',
					disabled: 0,
				}],
				rightIndex: 0,
			};
		},
		created() {
		  this.getDayList()
		},
		methods: {
			reset() {
				this.$emit('reset')
			},
		  confirm() {
			// 已满提示不能预约
			if(this.time_slots[this.rightIndex].disabled == 1) {
				this.$util.showToast({title: '该时间段已满，请选择其他时间'})
				return;
			}
		    this.$emit('chooseTime', {
		      food_type: this.time_slots[this.rightIndex].name,
		      time_day: `${this.timeList[this.leftIndex].date}`,
		    })
		  },
		  close() {
		    this.$emit('close')
		  },
		  //获取左侧日期三天数据列表
		  getDayList() {
			const days = [];
		    const today = new Date();
		    
		    for (let i = 0; i < 3; i++) {
		      const date = new Date();
		      date.setDate(today.getDate() + i);
		      
		      const month = date.getMonth() + 1;
		      const day = date.getDate();
		      const year = date.getFullYear();
		      
		      // 格式化日期显示
		      let name = '';
		      if (i === 0) {
		        name = '今天';
		      } else if (i === 1) {
		        name = '明天';
		      } else if (i === 2) {
		        name = '后天';
		      }
		      
		      days.push({
		        name: `${name} ${month}月${day}日`,
		        date: `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,
		        day: `${month}月${day}日`, // 保持与模板中使用的一致
		      });
		    }
		    
		    this.timeList = days;
		    // 默认选择第一天
		    this.changeLeft(0);
			
		  },
		  changeLeft(index) {
		    this.leftIndex = index;
			this.getRoomIsUse();
		  },
		  chooseTimeStr(index) {
		    this.rightIndex = index;
		  },
		  //获取房间时间预约情况
		  getRoomIsUse() {
			this.$api.sendRequest({
				url: "/api/food/issubscribe",
				data: {
					room_id: this.roomId,
					subscribe_time: this.timeList[this.leftIndex].date,
				},
				success: res => {
					if(res.code == 0) {
						this.time_slots[0].disabled = res.data.lunch;
						this.time_slots[1].disabled = res.data.dinner;
					}
				}
			})
		  },
		}
	}
</script>

<style lang="scss" scoped>
.popDialog {
  width: 100%;
  padding: 40rpx 0;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  box-sizing: border-box;
  background: #fff;
  .close {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
    width: 40rpx;
    height: 40rpx;
  }
  .title {
    padding-bottom: 40rpx;
  }
  .submit {
    width: 420rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    margin: 0 auto;
    background: $color-title2;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin-top: 40rpx;
  }
  .reset {
	width: 230rpx;
	border: 1px solid #BBBEC9;
	color: #5D657F!important;
	background: #fff;
  }
}

.timebox {
  display: flex;
  height: 524rpx;
  .timel {
    width: 228rpx;
    height: 100%;
    background: #F6F7FB;
    .date {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 110rpx;
      font-size: 30rpx;
      color: #1C274C;
    }
    .on {
      background: #fff;
      color: #1C274C!important;
	  font-weight: bold;
    }
  }
  .timer {
    width: calc(100% - 228rpx);
    height: 100%;
    background: #fff;
    .time {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 24rpx;
      width: 100%;
      box-sizing: border-box;
      border-radius: 20rpx;
      view {
        font-size: 26rpx;
        color: #696E80;
      }
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .active {
      background: #F6F7FB;
    }
  }
}
</style>